<template>
	<view class="pages">
		<view class="video-item" v-for="item in list" :key="item.id">
			<video :id="'video-'+item.id" :src="item.videoUrl" class="video"></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					// {
					// 	id: 1,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E6%A8%AA%E5%B1%8F.mp4'
					// },
					{
						id: 2,
						videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E7%AB%96%E5%B1%8F.mp4'
					},
					// {
					// 	id: 3,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%831.mp4'
					// },
					// {
					// 	id: 4,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8310.mp4'
					// },
					// {
					// 	id: 5,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8311.mp4'
					// },
					// {
					// 	id: 6,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8312.mp4'
					// },
					// {
					// 	id: 7,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8313.mp4'
					// },
					// {
					// 	id: 8,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8314.mp4'
					// },
					// {
					// 	id: 9,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8315.mp4'
					// },
					// {
					// 	id: 10,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8316.mp4'
					// },
					// {
					// 	id: 11,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8317.mp4'
					// },
					// {
					// 	id: 12,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8318.mp4'
					// },
					// {
					// 	id: 13,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8319.mp4'
					// },
					// {
					// 	id: 14,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%832.mp4'
					// },
					// {
					// 	id: 15,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8320.mp4'
					// },
					// {
					// 	id: 16,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%8321.mp4'
					// },
					// {
					// 	id: 17,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%833.mp4'
					// },
					// {
					// 	id: 18,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%834.mp4'
					// },
					// {
					// 	id: 19,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%835.mp4'
					// },
					// {
					// 	id: 20,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%836.mp4'
					// },
					// {
					// 	id: 21,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%837.mp4'
					// },
					// {
					// 	id: 22,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%838.mp4'
					// },
					// {
					// 	id: 23,
					// 	videoUrl: 'https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/live/%E8%82%83%E5%B7%9E%E5%8F%91%E5%B8%839.mp4'
					// }
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.video-item:nth-child(2n) {
			margin-right: 0;
		}

		.video-item {
			width: calc(50% - 15rpx);
			height: 340rpx;
			margin-bottom: 30rpx;
			margin-right: 15rpx;
			border-radius: 8rpx;

			.video {
				width: 100%;
				height: 340rpx;
			}

			.video-title {
				width: 100;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				padding: 20rpx;
				padding-bottom: 0;
			}
		}
	}
</style>